<template>
  <div class="app-container">
    <h2 style="text-align: center">添加历史人物</h2>
    <el-steps
      :active="2"
      process-status="wait"
      align-center
      style="margin-bottom: 40px"
    >
      <el-step title="人物基本信息"/>
      <el-step title="人物地点"/>
      <el-step title="人物总结"/>
    </el-steps>
    <!-- {{ loc.description }} -->
    <el-form label-width="120px">
      <el-collapse
        :accordion="true"
        v-model="activeNames"
        @change="handleCollapseChange"
        :key="activeKey"
      >
        <el-collapse-item
          v-for="(loc, index) in locations"
          :key="loc.id"
          :title="locations[index].locationTitle"
          :name="loc.id"
        >
          <el-input
            type="textarea"
            :readonly="true"
            :rows="6"
            v-model="loc.description"
          >
          </el-input>

          <el-form-item style="margin-top: 20px" align="right">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="updateDialog(index)"
            >修改信息
            </el-button
            >
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteFigureLocation(index)"
            >删除
            </el-button
            >
          </el-form-item>
        </el-collapse-item>
      </el-collapse>

      <el-button @click="openDialog" type="success" plain>添加地点</el-button>
      <el-button @click="deleteAllLocations" type="danger" plain>删除所有地点</el-button>
      <el-form-item align="right">
        <el-button @click="previous">上一步</el-button>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="next">{{
            btuTitle
          }}
        </el-button>
      </el-form-item>
    </el-form>
    <!-- ============================================================================== -->
    <!-- 添加地点 -->
    <el-dialog :visible.sync="dialogLocationFormVisible" title="添加地点">
      <el-form :model="figure_location" label-width="120px">
        <el-form-item label="时间">
          <el-input
            v-model="figure_location.year"
            placeholder=" 示例：1949-10-01"
            clearable
          />
        </el-form-item>

        <el-form-item label="地点名称">
          <el-input
            v-model="figure_location.locationTitle"
            placeholder=" 示例：北京市天安门"
            clearable
          />
          <SearchLocation :locationName="figure_location.locationTitle" v-on:getLoc="getLoc"></SearchLocation>
          <!--          <position ref="position"></position>-->
        </el-form-item>

        <el-form-item label="地点经度">
          <el-input v-model="figure_location.longitude" clearable/>
        </el-form-item>

        <el-form-item label="地点纬度">
          <el-input v-model="figure_location.latitude" clearable/>
        </el-form-item>

        <el-form-item label="地点排序">
          <el-input-number
            v-model="figure_location.sort"
            :min="1"
            controls-position="right"
          />
        </el-form-item>

        <el-form-item label="地点图片">
          <el-upload
            class="avatar-uploader"
            :action="BASE_API + '/gis/fileoss'"
            :show-file-list="false"
            :on-success="handleImgSuccess"
            :before-upload="beforeImgUpload"
          >
            <img
              v-if="figure_location.locationImg"
              :src="figure_location.locationImg"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="地点描述">
          <el-input
            v-model="figure_location.description"
            maxlength="500"
            type="textarea"
            placeholder="请输入事件描述"
            show-word-limit
            clearable
            :rows="6"
          />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import figureLocation from '@/api/figure/figure_location'
import SearchLocation from '../../components/Area/SearchLocation'
import figure_location from '../../api/figure/figure_location'

export default {
  components: {
    SearchLocation
  },
  data() {
    return {
      figure_location: {
        //人物地点封装
        id: '',
        figureId: '',
        year: null,
        locationTitle: '',
        longitude: '',
        latitude: '',
        sort: '',
        locationImg: '',
        videoSourceId: '',
        description: ''
      },
      locations: [], //地点列表
      activeNames: '',
      dialogLocationFormVisible: false, //是否打开弹窗
      saveBtnDisabled: false,
      activeKey: 1, //刷新组件
      figureId: '', //人物id
      locIndex: 0,
      BASE_API: process.env.BASE_API, // 接口API地址
      btuTitle: '下一步',
      hasPermission: true //是否有权限
    }
  },
  created() {
    if (this.$route.params && this.$route.params.id) {
      // params.id 中 id 和路由中的 占位符有关系
      this.figureId = this.$route.params.id
      this.getFigureLocation()
    }

    this.hasPermission = this.hasPerm('summary.add')
    if (!this.hasPermission) {
      this.btuTitle = '返回列表'
    }
  },
  methods: {
    deleteAllLocations(){
      figureLocation.deleteLocationByFigureId(this.figureId).then(res=>{
        // 提示信息
        this.$message({
          type: 'success',
          message: res.message
        })
        this.getFigureLocation()
      })

    },
    getLoc(loc) {
      this.figure_location.longitude = loc.lng
      this.figure_location.latitude = loc.lat
    },
    deleteFigureLocation(index) {
      // 根据地点id 删除地点信息
      const locationId = this.locations[index].id
      figureLocation.deleteFigureLocation(locationId).then(res => {
        // 提示信息
        this.$message({
          type: 'success',
          message: res.message
        })
        //地点数组中删除元素
        this.locations.splice(index, 1)
        //  内容更新
        this.activeKey = this.activeKey + 1
      })
    },
    previous() {
      this.$router.push({ path: '/figure/figure/' + this.figureId })
    },
    next() {
      if (this.hasPermission) {
        // 跳转到第二步
        this.$router.push({ path: '/figure/summary/' + this.figureId })
      } else {
        this.$router.push({ path: '/figure/list' })
      }
    },
    openDialog() {
      this.dialogLocationFormVisible = true
      this.figure_location.sort = this.locations.length + 1
    },
    //关闭弹窗
    closeDialog() {
      this.dialogLocationFormVisible = false
    },
    save() {
      this.figure_location.figureId = this.figureId
      figureLocation.addFigureLocation(this.figure_location).then((res) => {
        // 提示信息
        this.$message({
          type: 'success',
          message: res.message
        })
        this.figure_location.id = res.data.locationId
        this.locations.push(this.figure_location)
        this.activeKey = this.activeKey + 1
        this.dialogLocationFormVisible = false
        // 清空
        this.figure_location =  {
          //人物地点封装
          id: '',
          figureId: '',
          year: null,
          locationTitle: '',
          longitude: '',
          latitude: '',
          sort: '',
          locationImg: '',
          videoSourceId: '',
          description: ''
        }
      })
    },
    update() {
      figureLocation.updateFigureLocation(this.figure_location).then((res) => {
        // 提示信息
        this.$message({
          type: 'success',
          message: res.message
        })
        this.locations[this.locIndex] = this.figure_location
        this.activeKey = this.activeKey + 1
        this.dialogLocationFormVisible = false
      })
    },
    saveOrUpdate() {
      if (this.figure_location.id) {
        this.update()
      } else {
        this.save()
      }
    },
    // 更新数据
    updateDialog(index) {
      // 数据复显
      this.figure_location = this.locations[index]
      this.dialogLocationFormVisible = true
      this.locIndex = index
    },
    getFigureLocation() {
      figureLocation.getFigureLocation(this.figureId).then((res) => {
        // this.locations = res.data.figureLocationList;
        var list = res.data.figureLocationList
        list.forEach(element => {
          if (!element.locationTitle) {
            element.locationTitle = '暂无地点名'
          }
        })
        this.locations = list
        this.activeKey = this.activeKey + 1
      })
    },

    handleCollapseChange(value) {
      // console.log(value)
      // this.figure_location.id = value
    },
    // 图片上传成功的回调
    handleImgSuccess(res, file) {
      // 提示信息
      this.$message({
        type: 'success',
        message: res.message
      })
      this.figure_location.locationImg = res.data.url
    },
    // 图片上传之前的判断
    beforeImgUpload(file) {
      const isJPG = file.type
      const isLt1M = file.size / 1024 / 1024 < 10
      if (isJPG !== 'image/jpeg' && isJPG !== 'image/png') {
        this.$message.error('上传头像图片只能是 JPG 格式或者 PNG 格式!')
      }
      if (!isLt1M) {
        this.$message.error('上传的图片大小不能超过 10MB!')
      }
      return isJPG && isLt1M
    }
  }
}
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
